<template>
	<view class="page">
		<nav-bar :title="title" fontColor="#FFF" bgColor="#201b21"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<view class="merchant_info">
			<image :src="shopInfo.logo" mode="aspectFill"></image>
			<!-- <button>
				<image src="../../static/icon/shortVideo/ic_merchants_attention.png" mode="aspectFit"></image>
				<text>已关注</text>
			</button> -->
		</view>
		<view class="merchant_name_description">
			<view class="name">{{ shopInfo.name }}</view>
			<view class="description">{{ shopInfo.bulletin }}</view>
		</view>
		<view class="contact_merchant">
			<button @click="onCall(shopInfo.phone)">
				<image src="../../static/icon/theme/ic_merchants_phone.png" mode="aspectFit"></image>
				<text>联系一下</text>
			</button>
			<!-- <button>
				<image src="../../static/icon/shortVideo/ic_merchants_weixin.png" mode="aspectFit"></image>
				<text>添加微信</text>
			</button> -->
		</view>
		<view class="tab_box">
			<view :class="{ active: tabState == 1000 }" @click="onTabChange(1000)">商家</view>
			<view :class="{ active: tabState == 2000 }" @click="onTabChange(2000)">作品</view>
			<view :class="{ active: tabState == 3000 }" @click="onTabChange(3000)">动态 4</view>
		</view>
		<view v-if="tabState == 1000" class="merchant_info_box">
			<view class="input_form_box">
				<view class="input_box">
					<scroll-view scroll-x="true" class="imgs_scroll">
						<view class="imgs"><image v-for="(item, index) of shopInfo.qualification" :key="index" :src="item" mode="aspectFill" @click="onPreviewImage(item,shopInfo.qualification)"></image></view>
					</scroll-view>
					<view class="prompt">{{ shopInfo.introduce }}</view>
				</view>
			</view>
			<view class="input_form_box borderTop">
				<view class="input_box">
					<view class="name">商家名称</view>
					<view class="input_info">{{ shopInfo.name }}</view>
				</view>
				<view class="input_box line">
					<view class="name">商家地址</view>
					<view class="input_info">{{ shopInfo.address }}</view>
				</view>
			</view>
		</view>
		<view v-if="tabState == 2000" class="video_list_box">
			<view class="video_list" v-for="(item, index) of videoList" :key="index" @click="onPageJump('/pages/shortVideo/shortVideo?objId=' + item.objId)">
				<image :src="item.img" mode="aspectFill"></image>
				<view class="pageviews">{{item.visitNum}}</view>
			</view>
		</view>
		<view v-if="tabState == 3000" class="dynamic_list_box"><dynamic-item v-for="(item, index) of 6" :key="index" black @share="shareShow = true"></dynamic-item></view>
		<z-share v-model="shareShow"></z-share>
	</view>
</template>

<script>
import dynamicItem from '@/components/module/dynamic_item.vue';
import zShare from '@/components/module/share.vue';
export default {
	components: {
		dynamicItem,
		zShare
	},
	data() {
		return {
			title: '商家主页',
			tabState: 1000,
			shareShow: false,
			pageNo: 1,
			pages: 1,
			videoList: [],
            shopId: "",
            shopInfo: {}
		};
	},
	//第一次加载
	onLoad(e) {
		// 隐藏原生的tabbar
		uni.hideTabBar();
        if(e.objId){
            this.shopId = e.objId;
            this.loadData();
        }
	},
	//页面显示
	onShow() {},
	//方法
	methods: {
		onPageJump(url) {
			uni.navigateTo({
				url: url
			});
		},
		onTabChange(val) {
			this.tabState = val;
			if (val == 2000) {
				this.getVideoList();
			}
		},
        //拨打电话
        onCall(phone) {
        	if (phone) {
        		uni.makePhoneCall({
        			phoneNumber: phone
        		});
        	}
        },
        // 图片预览的方法
        onPreviewImage(currentUrl, ulsList) {
        	uni.previewImage({
        		current: currentUrl,
        		urls: ulsList,
        		loop: true,
        		indicator: 'default'
        	});
        },
        loadData(){
            this.$http
            	.get('api/mall/shop/v1/info', {
                    objId: this.shopId
                })
            	.then(res => {
            		this.shopInfo = res;
            	});
        },
		getVideoList() {
			if (this.pageNo <= this.pages) {
				let httpData = {
					pageNo: this.pageNo,
					pageSize: 15
				};
				this.$http
					.post('api/video/v1/works_list', httpData, {
						load: false
					})
					.then(res => {
						uni.stopPullDownRefresh();
						this.pages = res.pages;
						if (this.pageNo == 1) {
							this.videoList = res.data;
						} else {
							this.videoList = this.videoList.concat(res.data);
						}
						if (res.data.length > 0) {
							this.pageNo = this.pageNo + 1;
						}
					});
			}
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//页面下来刷新
	onPullDownRefresh() {},
	//页面上拉触底
	onReachBottom() {
		if (this.tabState == 2000) {
			this.getVideoList();
		}
	},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.page {
	background: #201b21;
	min-height: 100vh;
}
.merchant_info {
	padding: 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	> image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}
	button {
		width: 510rpx;
		height: 88rpx;
		background-color: $themeColor;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		image {
			width: 32rpx;
			height: 32rpx;
		}
		text {
			font-size: 32rpx;
			color: #ffffff;
			margin-left: 24rpx;
			font-weight: bold;
		}
	}
}
.merchant_name_description {
	padding: 30rpx;
	.name {
		font-size: 36rpx;
		color: #ffffff;
	}
	.description {
		font-size: 28rpx;
		color: #ffffff;
		opacity: 0.6;
		margin-top: 30rpx;
	}
}
.contact_merchant {
	padding: 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	button {
        flex: 1;
		height: 88rpx;
		border-radius: 8rpx;
		border: solid 1rpx #ffffff;
		background-color: transparent;
		display: flex;
		align-items: center;
		justify-content: center;
		image {
			width: 35rpx;
			height: 28rpx;
		}
		text {
			font-size: 28rpx;
			color: #ffffff;
			margin-left: 24rpx;
			font-weight: bold;
		}
	}
}
.tab_box {
	display: flex;
	view {
		flex: 1;
		padding: 30rpx 0;
		text-align: center;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.3);
		border-bottom: 4rpx solid transparent;
		&.active {
			color: #ffffff;
			font-weight: bold;
			border-bottom: 4rpx solid $themeColor;
		}
	}
}
.video_list_box {
	display: flex;
	flex-wrap: wrap;
	.video_list {
		width: 248rpx;
		height: 330rpx;
		position: relative;
		margin-right: 2rpx;
		margin-bottom: 2rpx;
		&:nth-child(3n) {
			margin-right: 0;
		}
		image {
			width: 100%;
			height: 100%;
		}
		.pageviews {
			position: absolute;
			height: 88rpx;
			bottom: 0;
			left: 0;
			width: 100%;
			background-image: linear-gradient(to, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
			padding: 0 12rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #ffffff;
			&::before {
				content: '';
				margin-right: 9rpx;
				width: 32rpx;
				height: 20rpx;
				@include bis('../../static/icon/shortVideo/ic_watch.png');
			}
		}
	}
}
.borderTop {
	border-top: 20rpx solid #2b262c;
}
.input_form_box {
	padding: 0 30rpx;
	.input_box {
		padding: 0;
		background-color: transparent;
		&.line {
			border-top: 2rpx solid #2b262c;
		}
		.name {
			color: #fff;
			opacity: 0.6;
		}
	}
	.imgs_scroll {
		width: 100%;
		padding-top: 30rpx;
		.imgs {
			display: flex;
			image {
				width: 162rpx;
				height: 162rpx;
				margin-right: 12rpx;
				background-color: #b67301;
				flex-shrink: 0;
			}
		}
	}
	.prompt {
		font-size: 24rpx;
		color: #fff;
		margin-top: 30rpx;
		opacity: 0.6;
	}
	.input_info {
		flex: 1;
		color: #fff;
		font-size: 24rpx;
		opacity: 0.6;
		display: flex;
		justify-content: flex-end;
	}
}
</style>
